<template>
  <div class="all">
<el-button type="primary" size="small" @click="add={}">添加礼物</el-button>
    <table width="100%" cellspacing="0" style="margin: 5px 0;">
      <thead>
        <tr>
          <th>序号</th>
         <!--  <th width="40px">分类</th> -->
          <th width="180px">礼物名称</th>
          <th width="80px">礼物ID</th>
          <th width="120px">价格(幸运币)</th>
        <!--  <th width="40px">风格</th> -->
          <th width="200px">小图(25*25)</th>
          <th width="180px" v-show="shop">大图(50*50)</th>
          <th width="200px">SVGA</th>
          <th width="180px">添加时间</th>
          <th width="140px">是否启用</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(val,name) in list" :key="name">
          <td>{{name}}</td>
         <!-- <td>{{val.giftType}}</td> -->
          <td>{{val.giftName}}</td>
           <td>{{val.id}}</td>
          <td>{{val.needCoin}}</td>
         <!-- <td>{{val.giftStyle}}</td> -->
          <td><img :src="val.giftIcon" alt="" class="giftIcon"></td>
          <td v-show="shop"><img :src="val.giftBigIcon" alt=""></td>
          <td>
            <el-link type="primary" @click="flashShop(val.flash)">查看</el-link></td>
          <td>{{val.addTime}}</td>
          <td>
            <el-switch
              v-model="val.enable"
              active-color="#13ce66"
              inactive-color="#b3afafe8"
              :active-value='1'
              :inactive-value='0'
              @change="Genable_set(val)"
              >
            </el-switch>
          </td>
          <td><el-button type="primary" @click="modify=val">修改</el-button>
       <!--   <el-button type="danger" @click="del(val)">删除</el-button> -->
          </td>
        </tr>
      </tbody>
    </table>

    <div id='canvas' v-show="svga_shop">
      <i class="el-icon-close" @click="svga_shop=!svga_shop"></i>
    </div>
    <div class="Mask">
    <div class="Popup" v-if="modify"  v-loading="loading">
      <div class="P-nav">修改————{{modify.giftName}}<i class="el-icon-close" @click="close"></i></div>
        <table style="width: 80%;margin: auto;" cellspacing="0">
          <tr>
            <td>礼物名称</td>
            <td><el-input v-model="modify.giftName" size="small"></el-input></td>
            <td></td>
          </tr>
          <tr>
            <td>礼物价格</td>
            <td><el-input type="number" v-model="modify.needCoin" size="small"></el-input></td>
            <td></td>
          </tr>
          <tr>
            <td>礼物图标</td>
            <td v-if="modify!=''">
              <img :src="modify.giftIcon" alt="" >
            </td>
            <td>
             <input type="file" style="display: none;" id="upload" @change="uploadMin($event)">
               <label for="upload">
                  <el-link type="primary" v-if="imgUrl==''">上传新的</el-link>
                  <img :src="imgUrl" alt="" v-else>
               </label>
            </td>

          </tr>
          <tr>
            <td>SVGA</td>
            <td v-if="modify!=''">
              <el-link type="primary" @click="flashShop(modify.flash)">查看</el-link>
            </td>
            <td >
            <input type="file" style="display: none;" id="falsh" @change="uploadFlash($event)">
            <label for="falsh">
              <el-link type="primary">上传新的</el-link>
            </label>
            </td>
          </tr>
          <tr>
            <td>是否启用</td>
            <td>
              <el-switch
                v-model="modify.enable"
                active-color="#13ce66"
                inactive-color="#b3afafe8"
                :active-value='1'
                :inactive-value='0'
                >
              </el-switch>
            </td>
            <td></td>
          </tr>
        </table>
        <div style="margin: auto;width: 200px; padding-top: 8px;">
          <el-button type="primary" round @click="modOne">提交</el-button>
          <el-button round @click="close">取消</el-button>
        </div>
    </div>
    <div class="Popup" v-if="add">
      <div class="P-nav">添加礼物<i class="el-icon-close" @click="close"></i></div>
        <table style="width: 80%;margin: auto;" cellspacing="0">
          <tr>
            <td>礼物名称</td>
            <td><el-input v-model="add.giftName" size="small"></el-input></td>
            <td></td>
          </tr>
          <tr>
            <td>礼物价格</td>
            <td><el-input type="number" v-model="add.needCoin" size="small"></el-input></td>
            <td></td>
          </tr>
          <tr>
            <td>礼物图标</td>
            <td>
             <input type="file" style="display: none;" id="upload" @change="uploadMin($event)">
               <label for="upload">
                  <el-link type="primary" v-if="imgUrl==''">上传新的</el-link>
                  <img :src="imgUrl" alt="" v-else>
               </label>
            </td>

          </tr>
          <tr>
            <td>SVGA</td>
            <td >
            <input type="file" style="display: none;" id="falsh" @change="uploadFlash($event)">
            <label for="falsh">
              <el-link type="primary">上传新的</el-link>
            </label>
            </td>
          </tr>
          <tr>
            <td>是否启用</td>
            <td>
              <el-switch
                v-model="add.enable"
                active-color="#13ce66"
                inactive-color="#b3afafe8"
                :active-value='1'
                :inactive-value='0'
                >
              </el-switch>
            </td>
            <td></td>
          </tr>
        </table>
        <div style="margin: auto;width: 200px; padding-top: 8px;">
          <el-button type="primary" round @click="submit">提交</el-button>
          <el-button round @click="close">取消</el-button>
        </div>
    </div>
    </div>

  </div>
</template>

<script>
   import SVGA from 'svgaplayerweb';
   import {Gdel,GmodOne,enable_set,Gadd,getAll} from "@/utils/API"
   import Cookies from 'js-cookie'
  export default{
     inject:["reload"],
    data(){
      return{
        add:false,
        imgmin:[],
        imgmax:'',
        imgUrl:'',
        flashup:[],
        category:[
          {
            id:1,
            name:'普通'
          }
        ],
        list:[],
        shop:false,
        svgaUrl:'',
        svga_shop:false,
        modify:false,
        date:{
          min:null,
          flash:null
        },
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        loading:null
      }
    },
    methods:{
      //修改状态
      Genable_set(e){
        // console.log(e)
        enable_set(e,this.admin).then(res=>{
          // console.log(res)
        })
      },
      //关闭
      close(){
        this.add=false
        this.modify=false
        this.imgUrl=''
      },
      //删除
      del(e){
        this.$confirm('此操作将永久删除'+e.giftName+', 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then(() => {
                  Gdel(e.id,this.admin).then(res=>{
                    // console.log(res)
                    this.$message.success('删除成功')
                    this.reload()
                  })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });

      },
     //添加
      submit(){
        var _this=this
        this.add.needCoin=Number(this.add.needCoin)
        if(this.date.min!=null){
          this.add.giftIcon=this.date.min
          this.add.flash=this.date.flash
          // console.log(this.add)
          Gadd(this.add,this.admin).then(res=>{
            if(res.code==0){
              this.$message.success('添加成功')
                this.reload()
            }
          })
        }else{
          this.$message.error('数据不全')
        }
      },
      //base64
      base64(file){
         return new Promise((resolve, reject) => {
                let reader = new FileReader();
                let fileResult = "";
                reader.readAsDataURL(file);
        　　　　　//开始转
                reader.onload = function() {
                  fileResult = reader.result;
                };
        　　　　　//转 失败
                reader.onerror = function(error) {
                  reject(error);
                };
        　　　　　//转 结束  咱就 resolve 出去
                reader.onloadend = function() {
                  resolve(fileResult);
                };
              });
      },
      //小图
      uploadMin(e) {
         this.loading=true
         var file = e.target.files[0];
         this.imgmin.Name=file.name
              if (window.createObjectURL!=undefined) { // basic
                this.imgUrl = window.createObjectURL(file) ;
              }else if (window.webkitURL!=undefined) { // webkit or chrome
                this.imgUrl = window.webkitURL.createObjectURL(file) ;
              }else if (window.URL!=undefined) { // mozilla(firefox)
                this.imgUrl = window.URL.createObjectURL(file) ;
              }
                  this.base64(file).then(resBase64 => {
              　this.imgmin.bese=resBase64.split(',')[1]//直接拿到base64信息
                    this.upload('admin/gift/img/upload/icon',this.imgmin).then(res=>{
                      this.date.min=res
                    })
                })
      },
      //大图
      uploadMax(e) {
         this.loading=true
        var that=this
            // 利用fileReader对象获取file
            var file = e.target.files[0];
            this.base64(file).then(resBase64 => {
                 　this.imgmax=resBase64.split(',')[1]//直接拿到base64信息
                   // console.log(resBase64.split(',')[1])
                   })
      },
      //flash
      uploadFlash(e) {
            // 利用fileReader对象获取file
          // this.bus.$emit('loading', true)
          this.loading=true
            var _this=this
            var file = e.target.files[0];
             this.flashup.Name=file.name
            this.base64(file).then(resBase64 => {
                 　this.flashup.bese=resBase64.split(',')[1]//直接拿到base64信息
                   // console.log(resBase64.split(',')[1])
                   this.upload('admin/gift/img/upload/flash',this.flashup).then(res=>{
                     // console.log("flash~~~~~~"+res)

                        // console.log(22222)

                        // _this.bus.$emit('loading', false)
                         _this.date.flash=res

                     })
                   })
      },
      upload(url,e){
        var _this=this
        return new Promise((resolve, reject)=>{
          _this.$axios({
            method: "POST",
            url: '/api/'+url,
            headers: {'Content-Type': 'application/json'},
            data: {   adminName:_this.$cookies.get('adminName'),
                      token:_this.$cookies.get('token'),
                      img:e.bese,
                      giftName:_this.modify.giftName||_this.add.giftName,
                      picName: e.Name
                  },
          }).then(res=>{
              // console.log(res)
              if(res.data.code==0){
                  _this.loading=false
                    resolve(res.data.data.imgUrl)
              }
            // console.log(res)

          })
        })
      },
      flashShop(e){
        // console.log(e)
          if(e){
            const i=e.slice(56)
             // console.log(i)
            this.svga_shop=true
            this.svgaInitial('/svga'+i)
          }else{
            this.$message('暂无动画')
          }
      },
      flsahColse(){
        this.svga_shop=false
      },
            svgaInitial(res){
                   var that = this ;
                   // console.log(res)
                   this.player = new SVGA.Player('#canvas');
                   this.parser = new SVGA.Parser('#canvas');
                     that.parser.load(res,function(videoItem){
                     let arr  =Object.entries(videoItem.images);  //---> 将对象转化成数组
                     // console.log(arr)
                     that.giftsLen = arr.length ;
                     that.player.loops = 0; // 动画循环次数  0 无限循环
                     that.player.setVideoItem(videoItem);
                     that.player.startAnimation(); // 开始动画

                     that.player.onFrame(function(i){
                         if(i>30){
                             // that.player.stopAnimation() //---> 停止动画
                         }
                     })
                     that.player.onFinished(function(){
                         // console.log('动画结束了执行相应的函数')
                         // window.location.href ="https://www.baidu.com"
                     })
                     if(that.giftsLen>0){
                        //  that.enter(arr,that.giftsLen) --->根据实际需求选择性调用 有动画拼接的时候调用该函数
                     }
                    },(err)=>console.log(err))
               },
      //修改
      modOne(){
        if(this.date.min!=null){
           this.modify.giftIcon=this.date.min
        }
        console.log(this.date.flash)
       if(this.date.flash!=null){
         this.modify.flash=this.date.flash
       }
             // console.log(this.modify)
          GmodOne(this.modify,this.admin).then(res=>{
            if(res.code==0){
              this.$message.success('修改成功')
              this.reload()
            }
          })
     },
    },
    mounted() {
      getAll(this.admin).then(res=>{
        // console.log(res)
         this.list=res.data.giftList
      })
    },
  }
</script>

<style scoped>
th{
      height: 30px;
      background: #eef3f7;
      border-bottom: 1px solid #d5dfe8;
      font-weight: normal;
}
tr{
  text-align: center;
}
td{
  border-bottom: #eee 1px solid;
      padding-top: 5px;
      padding-bottom: 5px;
}
td input{
margin: auto;
display: block;
text-align: center;
box-shadow:0 0 0 0 rgba(238,238,238,0.5)
}
img{
  width: 6.25rem;
  height: 6.25rem;
}
#canvas{
  width: 80%;
  height: 80%;
  z-index: 999;
  position: fixed;
  top: 157px;
  background-color: rgba(21, 18, 18, 0.3);
}
#canvas>i{
     font-size: 66px;
     text-align: right;
     float: right;
}
.Popup{
  position: fixed;
    top: 28%;
    left: 35%;
    width: 33%;
    height: 40vh;
    background-color: #edf1ee;
    border-radius: 5px;
    box-shadow: 0px 0px 100px #0c0c0c73;
}
.P-nav{
  margin:6px auto;
  width: 95%;
    font-size: 22px;
    border-bottom: 1px solid #d4cfcf;
    padding-bottom: 5px;
}
.P-nav>i{
  float: right;
  font-size: 22px;
}
.Popup> .el-button{
  text-align: center;
  margin: auto;
}
.Popup td{
  border-bottom: 1px solid #d4cfcf;
}
</style>
